<template>
    <transition name="fade">
        <div class="comment" v-show="show">
            <top :info="topData"></top>
            <leftBottom :info="leftBottomData"></leftBottom>
            <midBottom :info="midBottomData"></midBottom>
            <rightBottom :info="rightBottomData"></rightBottom>
            <div class="close-btn" @click="close"></div>
        </div>
    </transition>
</template>

<script>
import top from "./components/top.vue";
import leftBottom from "./components/leftBottom.vue";
import midBottom from "./components/midBottom.vue";
import rightBottom from "./components/rightBottom.vue";
import { queryCommentData } from "@/api/index.js";
export default {
    props: {
        interval: {},
    },
    components: {
        top,
        leftBottom,
        midBottom,
        rightBottom,
    },
    data() {
        return {
            show: false,
            topData: {},
            leftBottomData: {},
            midBottomData: {},
            rightBottomData: {},
            timer: null,
        };
    },
    computed: {},
    methods: {
        open() {
            this.getData();
            this.show = true;
            this.timerInit();
        },
        close() {
            this.show = false;
            this.$emit("close");
            clearTimeout(this.timer);
        },
        getData() {
            queryCommentData().then((resData) => {
                const res = resData.data ? resData.data : resData;
                this.generateData(res);
            });
        },
        generateData(res) {
            this.topData = res.topData;
            this.leftBottomData = res.leftBottomData;
            this.midBottomData = res.midBottomData;
            this.rightBottomData = res.rightBottomData;
        },
        timerInit() {
            this.timer = setTimeout(() => {
                this.close();
            }, (this.interval / 2) * 1000);
        },
    },
    created() {},
    mounted() {},
};
</script>
<style lang='less' scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.comment {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../../assets/img/comment/bg.png);
    z-index: 999;
    .close-btn {
        width: 85px;
        height: 89px;
        left: 1803px;
        top: 90px;
        cursor: pointer;
        position: absolute;
    }
}
</style>